<template>
  
  <div>
    <headerNavigation :jump="1"></headerNavigation>
    <labelNavigation></labelNavigation>

    <!-- 主体内容 -->
    <div class="main">
      <button class="back">
        <i class="el-icon-arrow-left" style="color:#bebebe;font-size:20px;margin-right:5px;" @click="remarks"></i>
        <span @click="remarks">返回</span>
      </button>

      <div class="main-content">

        <div class="personal">
          <div class="each-students">
            <span class="right-photo">
              <img :src="`${ src1 + student.avatar }`" style="width:4rem;height:4rem;border-radius:50%;" v-if="student.avatar!=''">
              <img src="@/assets/images/boy.png" style="width:4rem;height:4rem;border-radius:50%;" v-if="student.sex==0&&student.avatar==''">
              <img src="@/assets/images/girl.png" style="width:4rem;height:4rem;border-radius:50%;" v-if="student.sex==1&&student.avatar==''">
            </span>

            <div class="left-each">
              <span class="name">{{student.stuName}}</span>

              <div class="boy" v-if="student.sex==0">
                <span>👦</span>
                <span>男孩</span>
              </div>

              <div class="girl" v-if="student.sex==1">
                <span>👧</span>
                <span>女孩</span>
              </div>

            </div>
          </div>
        </div>

        <input class="text-content" v-model="myData11.comments">

        <div class="confirm-container" >
          <button class="confirm" @click="writeRemarks(student)">
            确认
          </button>
        </div>        

      </div>
    </div>

    <footerNavigation></footerNavigation>
  </div>  

</template>

<script>
import { postOneStudentComments } from "@/api/message/gradeTeacher";
import headerNavigation from '@/views/components/background/headerNavigation2'
import labelNavigation from '@/views/components/background/labelNavigation3'
import footerNavigation from '@/views/components/background/footerNavigation'
import module from "@/allurlimg/img";

export default {
  data() {
    return {
      src1: '',
      classesData:[],
      student:{},
      myData11:{}

    }
  },
  components: {
    headerNavigation,
    labelNavigation,
    footerNavigation,
  },
  mounted() {
    this.src1 = module.host;
    this.student=this.$route.params.student
    this.myData11=this.$route.params.comments
    // this.getStudentComments(this.$route.params.student)
  

    this.$bus.$on( (data)=>{
      this.classesTwoData.push(data)
    })
  },
  methods: {
    remarks() {
      this.$router.push('/message')
    }, 

    writeRemarks(data) {
      this.$router.push({
        name:'writeRemarksC',
        params:{student:data}
      })

      const studentComments = {
        studentId: this.myData11.studentId,
        comments: this.myData11.comments
      }
      this.psotStudentComments(studentComments)
      
    },


    async psotStudentComments(data){
      console.log(data,"dddddddd")
      
      const res = await postOneStudentComments(data)
      console.log(res, '123')
    }
  }
  ,
  created(){
    
  }
}

</script>


<style scoped>
/* 主体内容 */
.main {
  display: flex;
  flex-direction: column;
  height: 640px;
  border: 2px solid #f5f5f5;
  margin: 20px 230px 160px 230px;
}

/* 返回 */
.back {
  display: flex;
  font-size: 16px;
  border: 0px solid;
  align-items: center;
  background: #fff;
  margin: 10px 0 0 20px;
}

/* 内容 */
.main-content {
  margin: 10px 60px;
  position: relative;
}

/* 个人信息栏 */
.personal {
  display: flex;
  flex-wrap: wrap;
}

/* 单个个人信息框 */
.each-students {
  display: flex;
  flex-direction: row;
  height: 80px;
  border-radius: 5px;
}

/* 左侧信息框 */
.each-students .left-each {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

/* 姓名信息 */
.left-each .name {
  font-size: 16px;
}

/* 性别信息 */
.each-students .boy {
  font-size: 12px;
  margin-top: 7px;
  width: 60px;
  height: 20px;
  border-radius: 5px;
  padding: 2px 7px;
  color: #5f9eed;
  background: #e4f0fe;
}

.each-students .girl {
  font-size: 12px;
  margin-top: 7px;
  width: 60px;
  height: 20px;
  border-radius: 5px;
  padding: 2px 7px;
  color: #ed8c5f;
  background: #fef1e4;
}

/* 头像信息 */
.each-students .right-photo {
  margin: 5px 10px 5px 0;
  display: flex;
  width: 66px;
  height: 66px;
  border-radius: 50%;
}

.text-content {
  display: flex;
  width: 100%;
  height: 400px;
  border-radius: 5px;
  border: 1px solid #f5f5f5;
  box-shadow:inset 0px 0px 2px 1px rgba(99,99,99,0.2);
	-webkit-box-shadow: 0px 0px 2px 1px rgba(99,99,99,0.2);
	-moz-box-shadow: 0px 0px 2px 1px rgba(99,99,99,0.2);
}

.confirm-container {
  display: flex;
  margin: 20px 0px;
  justify-content: center;
}

.confirm {
  width: 280px;
  height: 40px;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  background: #7c0000;
  border: 1px solid rgba(187, 187, 187);
}

</style>